<template>
  <page-dialog
    :title="dialogInfo.title"
    v-model:visible="showDialog"
    :width="dialogInfo.width"
    :bt-list="dialogInfo.btList"
  >
    <div class="model-panel">
      <div class="model-panel-body">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="表格查询设置" name="queryLevel">
            <el-row class="set-preference-wrap">
              <el-col :span="10">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!searchList1.length"
                  @click="rightMove('queryLevel')"
                  >一键右移</el-button
                >
                <div class="set-preference-item margin-right">
                  <div class="draggable-wrap-item background-color">
                    <span>未选</span>
                    <div
                      class="draggable-wrap-item-right-form-width-default-title"
                    >
                      默认值
                    </div>
                  </div>
                  <draggable
                    class="draggable-wrap"
                    :list="searchList1"
                    @add="add1"
                    tag="ul"
                    item-key="value"
                    v-bind="{
                      animation: 200,
                      group: 'site',
                    }"
                  >
                    <!-- @choose="choose1" -->
                    <template #item="{ element, index }">
                      <div
                        class="draggable-wrap-item"
                        :key="element.value + index"
                      >
                        <span>{{ element.label }}</span>
                        <div class="draggable-wrap-item-right">
                          <div style="width: 216px; margin-right: 10px">
                            <template v-if="element.slot">
                              <slot
                                :name="'preference-' + element.value"
                                :row="element"
                                :key="element.value"
                              ></slot>
                            </template>
                            <el-input
                              v-if="element.componentType === 'input'"
                              v-model="element.searchDefaultValue"
                              style="width: 100%"
                              :disabled="element.disabled || false"
                              :key="element.value"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :placeholder="getPlaceholder(element)"
                              @input="
                                (e) => (element.searchDefaultValue = validSe(e))
                              "
                            />
                            <el-input
                              v-if="element.componentType === 'textarea'"
                              style="width: 100%"
                              v-model="element.searchDefaultValue"
                              :disabled="element.disabled || false"
                              :key="element.value"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :placeholder="getPlaceholder(element)"
                              @input="
                                (e) => (element.searchDefaultValue = validSe(e))
                              "
                            />
                            <!-- 选择框 -->
                            <el-select
                              v-if="element.componentType === 'select'"
                              style="width: 100%"
                              v-model="element.searchDefaultValue"
                              :disabled="element.disabled"
                              :multiple="element.multiple"
                              :key="element.value"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :filterable="
                                element.filterable === false
                                  ? element.filterable
                                  : true
                              "
                              @visible-change="
                                visibleChange($event, element.list)
                              "
                              :placeholder="getPlaceholder(element)"
                            >
                              <el-option
                                v-for="(
                                  childItem, childIndex
                                ) in listTypeOptionsInfo[element.list]"
                                :key="childItem.key"
                                :label="
                                  childItem.key.length > 12
                                    ? childItem.key.substring(0, 12) + '...'
                                    : childItem.key
                                "
                                :value="childItem.value"
                              />
                            </el-select>
                            <SelectMultiple
                              v-if="element.componentType === 'selectMultiple'"
                              v-model="element.searchDefaultValue"
                              style="width: 100%"
                              :key="element.value"
                              :placeholder="getPlaceholder(element)"
                              :options="listTypeOptionsInfo[element.list]"
                              :key-field="element.keyField"
                              :value-field="element.valueField"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :filterable="
                                element.filterable === false
                                  ? element.filterable
                                  : true
                              "
                              :disabled="element.disabled"
                              :multiple="true"
                            />
                            <slip-select
                              v-if="element.componentType === 'slip-select'"
                              v-model:modelValue="element.searchDefaultValue"
                              style="width: 100%"
                              value-key="value"
                              :key="element.value"
                              :placeholder="getPlaceholder(element)"
                              :api="element.api"
                              :query="element.query"
                              :default-value="element.defaultValue"
                              :key-field="element.keyField"
                              :value-field="element.valueField"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :filterable="
                                element.filterable === false
                                  ? element.filterable
                                  : true
                              "
                              :disabled="element.disabled"
                              :multiple="element.multiple"
                            />
                            <select-model
                              v-if="element.componentType === 'select-model'"
                              v-model:modelValue="element.searchDefaultValue"
                              :key="element.value"
                              :type-code="element.code"
                              :disabled="element.disabled"
                              :clear-type="true"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :check-default="
                                element.checkDefault
                                  ? element.checkDefault
                                  : false
                              "
                              :placeholder="getPlaceholder(element)"
                              :only-show-option="element.onlyShowOption"
                              :multiple="element.multiple"
                            />
                            <!-- 时间选择框 -->
                            <el-time-select
                              v-if="element.componentType === 'time'"
                              v-model="element.searchDefaultValue"
                              style="width: 100%"
                              :key="element.value"
                              :disabled-date="
                                element.TimePickerOptions &&
                                element.TimePickerOptions.disabledDate
                              "
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :disabled="element.disabled"
                              :placeholder="getPlaceholder(element)"
                            />
                            <!-- 日期选择框 -->
                            <el-date-picker
                              v-if="element.componentType === 'date'"
                              v-model="element.searchDefaultValue"
                              style="width: 100%"
                              :key="element.value"
                              :disabled-date="
                                element.datePickerOptions &&
                                element.datePickerOptions.disabledDate
                              "
                              type="date"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :disabled="element.disabled"
                              format="YYYY-MM-DD"
                              value-format="YYYY-MM-DD"
                              :placeholder="getPlaceholder(element)"
                            />
                            <el-date-picker
                              v-if="element.componentType === 'daterange'"
                              v-model="element.searchDefaultValue"
                              :key="element.value"
                              style="width: 202px"
                              format="YYYY-MM-DD"
                              value-format="YYYY-MM-DD"
                              type="daterange"
                              range-separator="至"
                              :shortcuts="$fn.pickerOptionsFn()"
                              align="right"
                              :start-placeholder="element.label + '开始日期'"
                              :end-placeholder="element.label + '结束日期'"
                              @change="timeChange($event, element)"
                            ></el-date-picker>
                            <el-date-picker
                              v-if="element.componentType === 'dateTime'"
                              v-model="element.searchDefaultValue"
                              :key="element.value"
                              style="width: 202px"
                              :disabled-date="
                                element.datePickerOptions &&
                                element.datePickerOptions.disabledDate
                              "
                              type="datetime"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :disabled="element.disabled"
                              format="YYYY-MM-DD HH:mm:ss"
                              value-format="YYYY-MM-DD HH:mm:ss"
                              :placeholder="getPlaceholder(element)"
                            />
                            <el-date-picker
                              v-if="element.componentType === 'datetimerange'"
                              v-model="timeInfo[element.value]"
                              :key="element.value"
                              style="width: 202px"
                              format="YYYY-MM-DD HH:mm:ss"
                              value-format="YYYY-MM-DD HH:mm:ss"
                              type="datetimerange"
                              range-separator="至"
                              :shortcuts="$fn.pickerOptionsFn()"
                              align="right"
                              :default-time="[
                                new Date(2000, 1, 1, 0, 0, 0),
                                new Date(2000, 1, 1, 23, 59, 59),
                              ]"
                              :start-placeholder="element.label + '开始日期'"
                              :end-placeholder="element.label + '结束日期'"
                              @change="timeChange($event, element)"
                            ></el-date-picker>

                            <el-input
                              v-if="element.componentType === 'select-user'"
                              v-model="userInfo.data[element.value]"
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkUser(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="element.componentType === 'select-supplier'"
                              v-model="supplierInfo.data[element.value]"
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkSupplier(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="element.componentType === 'select-product'"
                              v-model="productInfo.data[element.value]"
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkProduct(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-use-status'
                              "
                              v-model="selectUseStatusInfo.data[element.value]"
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkUserStatus(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="element.componentType === 'select-dept'"
                              v-model="selectDeptInfo.data[element.value]"
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkDept(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-device-type'
                              "
                              v-model="selectDeviceTypeInfo.data[element.value]"
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkDevice(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-finance-type'
                              "
                              v-model="
                                selectFinanceTypeInfo.data[element.value]
                              "
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkFinance(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType ===
                                'select-asset-classify-type'
                              "
                              v-model="
                                selectAssetClassifyTypeInfo.data[element.value]
                              "
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkClassify(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-fiscal-period'
                              "
                              v-model="
                                selectFiscalPeriodInfo.data[element.value]
                              "
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template
                                #suffix
                                v-if="
                                  selectFiscalPeriodInfo.data[element.value]
                                "
                                style="cursor: pointer"
                              >
                                <el-icon @click="clearFiscalPeriod()"
                                  ><CircleCloseFilled
                                /></el-icon>
                              </template>
                              <template #append>
                                <el-icon @click="checkFiscalPeriod(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-patrol-route'
                              "
                              v-model="
                                selectPatrolRouteInfo.data[element.value]
                              "
                              class="not-mongolia"
                              type="input"
                              :key="element.value"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkPatrolRoute(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-maintenance'
                              "
                              v-model="
                                selectMaintenanceInfo.data[element.value]
                              "
                              class="not-mongolia"
                              type="input"
                              :key="element.value"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkMaintenance(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-repair-user'
                              "
                              v-model="selectRepairUserInfo.data[element.value]"
                              class="not-mongolia"
                              type="input"
                              :key="element.value"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkRepairUser(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType ===
                                'select-maintenance-user'
                              "
                              v-model="
                                selectMaintenanceUserInfo.data[element.value]
                              "
                              class="not-mongolia"
                              type="input"
                              :key="element.value"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkMaintenanceUser(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="element.componentType === 'select-shelf-no'"
                              v-model="selectCargoSpaceInfo.data[element.value]"
                              class="not-mongolia"
                              type="input"
                              :key="element.value"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkShelfNo(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-product-class'
                              "
                              v-model="
                                productClassificationInfo.data[element.value]
                              "
                              class="not-mongolia"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkProductClass(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <span>{{ noInput(element) }}</span>
                          </div>
                        </div>
                      </div>
                    </template>
                  </draggable>
                </div>
              </el-col>
              <el-col :span="13">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!searchList2.length"
                  @click="leftMove('queryLevel')"
                  >一键左移</el-button
                >
                <div class="set-preference-item">
                  <div class="draggable-wrap-item background-color">
                    <span>已选</span>
                    <div class="draggable-wrap-item-right">
                      <div
                        class="draggable-wrap-item-right-form-width-default-title"
                      >
                        默认值
                      </div>
                      <span class="slip-edit">操作</span>
                    </div>
                  </div>
                  <draggable
                    class="draggable-wrap"
                    v-model="searchList2"
                    @add="add2"
                    @update="datadragSearchEnd2"
                    tag="ul"
                    item-key="value"
                    v-bind="{
                      animation: 200,
                      group: 'site',
                    }"
                  >
                    <!-- @choose="choose2" -->
                    <template #item="{ element, index }">
                      <div
                        class="draggable-wrap-item"
                        :key="element.value + index"
                      >
                        <span> {{ element.label }}</span>
                        <div class="draggable-wrap-item-right">
                          <div style="width: 216px; margin-right: 10px">
                            <template v-if="element.slot">
                              <slot
                                :name="'preference-' + element.value"
                                :row="element"
                                :key="element.value"
                              ></slot>
                            </template>
                            <el-input
                              v-if="element.componentType === 'input'"
                              v-model="element.searchDefaultValue"
                              style="width: 100%"
                              :disabled="element.disabled || false"
                              :key="element.value"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :placeholder="getPlaceholder(element)"
                              @input="
                                (e) => (element.searchDefaultValue = validSe(e))
                              "
                            />
                            <el-input
                              v-if="element.componentType === 'textarea'"
                              style="width: 100%"
                              v-model="element.searchDefaultValue"
                              :disabled="element.disabled || false"
                              :key="element.value"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :placeholder="getPlaceholder(element)"
                              @input="
                                (e) => (element.searchDefaultValue = validSe(e))
                              "
                            />
                            <!-- 选择框 -->
                            <el-select
                              v-if="element.componentType === 'select'"
                              style="width: 100%"
                              v-model="element.searchDefaultValue"
                              :disabled="element.disabled"
                              :multiple="element.multiple"
                              :key="element.value"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :filterable="
                                element.filterable === false
                                  ? element.filterable
                                  : true
                              "
                              @visible-change="
                                visibleChange($event, element.list)
                              "
                              :placeholder="getPlaceholder(element)"
                            >
                              <el-option
                                v-for="(
                                  childItem, childIndex
                                ) in listTypeOptionsInfo[element.list]"
                                :key="childItem.key"
                                :label="
                                  childItem.key.length > 12
                                    ? childItem.key.substring(0, 12) + '...'
                                    : childItem.key
                                "
                                :value="childItem.value"
                              />
                            </el-select>
                            <SelectMultiple
                              v-if="element.componentType === 'selectMultiple'"
                              v-model="element.searchDefaultValue"
                              style="width: 100%"
                              :key="element.value"
                              :placeholder="getPlaceholder(element)"
                              :options="listTypeOptionsInfo[element.list]"
                              :key-field="element.keyField"
                              :value-field="element.valueField"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :filterable="
                                element.filterable === false
                                  ? element.filterable
                                  : true
                              "
                              :disabled="element.disabled"
                              :multiple="true"
                            />
                            <slip-select
                              v-if="element.componentType === 'slip-select'"
                              v-model:modelValue="element.searchDefaultValue"
                              style="width: 100%"
                              value-key="value"
                              :key="element.value"
                              :placeholder="getPlaceholder(element)"
                              :api="element.api"
                              :query="element.query"
                              :default-value="element.defaultValue"
                              :key-field="element.keyField"
                              :value-field="element.valueField"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :filterable="
                                element.filterable === false
                                  ? element.filterable
                                  : true
                              "
                              :disabled="element.disabled"
                              :multiple="element.multiple"
                            />
                            <select-model
                              v-if="element.componentType === 'select-model'"
                              v-model:modelValue="element.searchDefaultValue"
                              :key="element.value"
                              :type-code="element.code"
                              :disabled="element.disabled"
                              :clear-type="true"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :check-default="
                                element.checkDefault
                                  ? element.checkDefault
                                  : false
                              "
                              :placeholder="getPlaceholder(element)"
                              :only-show-option="element.onlyShowOption"
                              :multiple="element.multiple"
                            />
                            <!-- 时间选择框 -->
                            <el-time-select
                              v-if="element.componentType === 'time'"
                              v-model="element.searchDefaultValue"
                              style="width: 100%"
                              :key="element.value"
                              :disabled-date="
                                element.TimePickerOptions &&
                                element.TimePickerOptions.disabledDate
                              "
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :disabled="element.disabled"
                              :placeholder="getPlaceholder(element)"
                            />
                            <!-- 日期选择框 -->
                            <el-date-picker
                              v-if="element.componentType === 'date'"
                              v-model="element.searchDefaultValue"
                              style="width: 100%"
                              :key="element.value"
                              :disabled-date="
                                element.datePickerOptions &&
                                element.datePickerOptions.disabledDate
                              "
                              type="date"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :disabled="element.disabled"
                              format="YYYY-MM-DD"
                              value-format="YYYY-MM-DD"
                              :placeholder="getPlaceholder(element)"
                            />
                            <el-date-picker
                              v-if="element.componentType === 'daterange'"
                              v-model="timeInfo[element.value]"
                              :key="element.value"
                              style="width: 202px"
                              format="YYYY-MM-DD"
                              value-format="YYYY-MM-DD"
                              type="daterange"
                              range-separator="至"
                              :shortcuts="$fn.pickerOptionsFn()"
                              align="right"
                              :start-placeholder="element.label + '开始日期'"
                              :end-placeholder="element.label + '结束日期'"
                              @change="timeChange($event, element)"
                            ></el-date-picker>
                            <el-date-picker
                              v-if="element.componentType === 'dateTime'"
                              v-model="element.searchDefaultValue"
                              :key="element.value"
                              style="width: 202px"
                              :disabled-date="
                                element.datePickerOptions &&
                                element.datePickerOptions.disabledDate
                              "
                              type="datetime"
                              :clearable="
                                element.clearable === false
                                  ? element.clearable
                                  : true
                              "
                              :disabled="element.disabled"
                              format="YYYY-MM-DD HH:mm:ss"
                              value-format="YYYY-MM-DD HH:mm:ss"
                              :placeholder="getPlaceholder(element)"
                            />
                            <el-date-picker
                              v-if="element.componentType === 'datetimerange'"
                              v-model="timeInfo[element.value]"
                              :key="element.value"
                              style="width: 202px"
                              format="YYYY-MM-DD HH:mm:ss"
                              value-format="YYYY-MM-DD HH:mm:ss"
                              type="datetimerange"
                              range-separator="至"
                              :shortcuts="$fn.pickerOptionsFn()"
                              align="right"
                              :default-time="[
                                new Date(2000, 1, 1, 0, 0, 0),
                                new Date(2000, 1, 1, 23, 59, 59),
                              ]"
                              :start-placeholder="element.label + '开始日期'"
                              :end-placeholder="element.label + '结束日期'"
                              @change="timeChange($event, element)"
                            ></el-date-picker>

                            <el-input
                              v-if="element.componentType === 'select-user'"
                              v-model="userInfo.data[element.value]"
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkUser(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="element.componentType === 'select-supplier'"
                              v-model="supplierInfo.data[element.value]"
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkSupplier(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="element.componentType === 'select-product'"
                              v-model="productInfo.data[element.value]"
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkProduct(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-use-status'
                              "
                              v-model="selectUseStatusInfo.data[element.value]"
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkUserStatus(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="element.componentType === 'select-dept'"
                              v-model="selectDeptInfo.data[element.value]"
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkDept(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-device-type'
                              "
                              v-model="selectDeviceTypeInfo.data[element.value]"
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkDevice(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-finance-type'
                              "
                              v-model="
                                selectFinanceTypeInfo.data[element.value]
                              "
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkFinance(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType ===
                                'select-asset-classify-type'
                              "
                              v-model="
                                selectAssetClassifyTypeInfo.data[element.value]
                              "
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkClassify(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-fiscal-period'
                              "
                              v-model="
                                selectFiscalPeriodInfo.data[element.value]
                              "
                              class="not-mongolia"
                              :key="element.value"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template
                                #suffix
                                v-if="
                                  selectFiscalPeriodInfo.data[element.value]
                                "
                                style="cursor: pointer"
                              >
                                <el-icon @click="clearFiscalPeriod()"
                                  ><CircleCloseFilled
                                /></el-icon>
                              </template>
                              <template #append>
                                <el-icon @click="checkFiscalPeriod(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-patrol-route'
                              "
                              v-model="
                                selectPatrolRouteInfo.data[element.value]
                              "
                              class="not-mongolia"
                              type="input"
                              :key="element.value"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkPatrolRoute(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-maintenance'
                              "
                              v-model="
                                selectMaintenanceInfo.data[element.value]
                              "
                              class="not-mongolia"
                              type="input"
                              :key="element.value"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkMaintenance(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-repair-user'
                              "
                              v-model="selectRepairUserInfo.data[element.value]"
                              class="not-mongolia"
                              type="input"
                              :key="element.value"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkRepairUser(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType ===
                                'select-maintenance-user'
                              "
                              v-model="
                                selectMaintenanceUserInfo.data[element.value]
                              "
                              class="not-mongolia"
                              type="input"
                              :key="element.value"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkMaintenanceUser(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="element.componentType === 'select-shelf-no'"
                              v-model="selectCargoSpaceInfo.data[element.value]"
                              class="not-mongolia"
                              type="input"
                              :key="element.value"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkShelfNo(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <el-input
                              v-if="
                                element.componentType === 'select-product-class'
                              "
                              v-model="
                                productClassificationInfo.data[element.value]
                              "
                              class="not-mongolia"
                              type="input"
                              :required="true"
                              :disabled="true"
                              :placeholder="'请选择' + element.label"
                            >
                              <template #append>
                                <el-icon @click="checkProductClass(element)"
                                  ><MoreFilled
                                /></el-icon>
                              </template>
                            </el-input>
                            <span>{{ noInput(element) }}</span>
                          </div>

                          <span
                            class="slip-edit"
                            @click="setTop(element, searchList2, 'queryLevel')"
                          >
                            {{ index ? '置顶' : '' }}
                          </span>
                        </div>
                      </div>
                    </template>
                  </draggable>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="表格显示设置" name="showLevel">
            <el-row class="set-preference-wrap">
              <el-col :span="6">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList1.length"
                  @click="rightMove('showLevel')"
                  >一键右移</el-button
                >
                <div class="set-preference-item margin-right">
                  <div class="draggable-wrap-item background-color">未选</div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList1"
                    tag="ul"
                    v-bind="{
                      animation: 200,
                      group: 'fieldSite',
                    }"
                    item-key="value"
                    @add="fieldAddshow1"
                  >
                    <template #item="{ element, index }">
                      <div
                        class="draggable-wrap-item"
                        :key="element.value + index"
                      >
                        {{ element.label }}
                      </div>
                    </template>
                  </draggable>
                </div>
              </el-col>
              <el-col :span="17">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList2.length"
                  @click="leftMove('showLevel')"
                  >一键左移</el-button
                >
                <div class="set-preference-item">
                  <div class="draggable-wrap-item background-color">
                    <span>已选</span>
                    <div class="draggable-wrap-item-right">
                      <div class="draggable-wrap-item-right-form-width-title">
                        单元格宽度
                      </div>
                      <span class="slip-edit">操作</span>
                    </div>
                  </div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList2"
                    tag="ul"
                    v-bind="{
                      animation: 200,
                      group: 'fieldSite',
                    }"
                    item-key="value"
                    @add="fieldAddshow2"
                    @update="datadragFieldEnd2"
                  >
                    <template #item="{ element, index }">
                      <div
                        class="draggable-wrap-item"
                        :key="element.value + index"
                      >
                        <span> {{ element.label }}</span>
                        <div class="draggable-wrap-item-right">
                          <el-input-number
                            style="width: 100px; margin-right: 10px"
                            clearable
                            controls-position="right"
                            v-model="element.minWidth"
                            :min="0"
                          ></el-input-number>
                          <span
                            class="slip-edit"
                            @click="setTop(element, fieldList2, 'showLevel')"
                          >
                            {{ index ? '置顶' : '' }}
                          </span>
                        </div>
                      </div>
                    </template>
                  </draggable>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane
            label="表格分组设置"
            v-if="groupLevelShow"
            name="groupLevel"
          >
            <el-row class="set-preference-wrap">
              <el-col :span="6">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList1.length"
                  @click="rightMove('groupLevel')"
                  >一键右移</el-button
                >
                <div class="set-preference-item margin-right">
                  <div class="draggable-wrap-item background-color">未选</div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList1"
                    tag="ul"
                    v-bind="{
                      animation: 200,
                      group: 'fieldSite',
                    }"
                    item-key="value"
                    @add="fieldAddGroup1"
                  >
                    <template #item="{ element, index }">
                      <div
                        class="draggable-wrap-item"
                        :key="element.value + index"
                      >
                        {{ element.label }}
                      </div>
                    </template>
                  </draggable>
                </div>
              </el-col>
              <el-col :span="17">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList2.length"
                  @click="leftMove('groupLevel')"
                  >一键左移</el-button
                >
                <div class="set-preference-item">
                  <div class="draggable-wrap-item background-color">
                    <span>已选</span>
                    <span class="slip-edit">操作</span>
                  </div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList2"
                    tag="ul"
                    v-bind="{
                      animation: 200,
                      group: 'fieldSite',
                    }"
                    item-key="value"
                    @add="fieldAddGroup2"
                    @update="datadragFieldEnd3"
                  >
                    <template #item="{ element, index }">
                      <span> {{ element.label }}</span>
                      <span
                        class="slip-edit"
                        @click="setTop(element, fieldList2, 'groupLevel')"
                      >
                        {{ index ? '置顶' : '' }}
                      </span>
                    </template>
                  </draggable>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane name="sortLevel">
            <template #label>
              <div style="display: flex">
                <span class="margin-right">表格排序设置</span>
                <select-model
                  v-if="activeName === 'sortLevel'"
                  v-model="newCustomizeUserVO.head.sortType"
                  type-code="sort_type"
                  :clearable="false"
                  :check-default="true"
                  width="100px"
                  placeholder="请选择排序方式"
                />
              </div>
            </template>
            <el-row class="set-preference-wrap">
              <el-col :span="6">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList1.length"
                  @click="rightMove('sortLevel')"
                  >一键右移</el-button
                >
                <div class="set-preference-item margin-right">
                  <div class="draggable-wrap-item background-color">未选</div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList1"
                    tag="ul"
                    v-bind="{
                      animation: 200,
                      group: 'fieldSite',
                    }"
                    item-key="value"
                    @add="fieldAddSort1"
                  >
                    <template #item="{ element, index }">
                      <div
                        class="draggable-wrap-item"
                        :key="element.value + index"
                      >
                        {{ element.label }}
                      </div>
                    </template>
                  </draggable>
                </div>
              </el-col>
              <el-col :span="17">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList2.length"
                  @click="leftMove('sortLevel')"
                  >一键左移</el-button
                >
                <div class="set-preference-item">
                  <div class="draggable-wrap-item background-color">
                    <span>已选</span>
                    <span class="slip-edit">操作</span>
                  </div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList2"
                    tag="ul"
                    v-bind="{
                      animation: 200,
                      group: 'fieldSite',
                    }"
                    item-key="value"
                    @add="fieldAddSort2"
                    @update="datadragFieldEnd4"
                  >
                    <template #item="{ element, index }">
                      <div class="draggable-wrap-item" :key="index">
                        <span>{{ element.label }}</span>
                        <span
                          class="slip-edit"
                          @click="changeSort(element.sortControllerType, index)"
                        >
                          {{
                            element.sortControllerType === 1
                              ? '升序'
                              : element.sortControllerType === 2
                              ? '降序'
                              : ''
                          }}
                        </span>
                      </div>
                    </template>
                  </draggable>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </page-dialog>
  <select-users
    v-if="userInfo.visible"
    v-model:show-dialog="userInfo.visible"
    :api="userInfo.api"
    :save-empty="true"
    :checked-list="
      userInfo.row.checkBox ? userInfo.checked[userInfo.row.value] : []
    "
    :check-box="userInfo.row.checkBox"
    :highlight-row="userInfo.row.highlightRow"
    @callback="callBackUser"
  />
  <select-use-status
    v-if="selectUseStatusInfo.visible"
    v-model:show-dialog="selectUseStatusInfo.visible"
    :api="selectUseStatusInfo.api"
    :save-empty="true"
    :checked-list="
      selectUseStatusInfo.row.checkBox
        ? selectUseStatusInfo.checked[selectUseStatusInfo.row.value]
        : []
    "
    :check-box="selectUseStatusInfo.row.checkBox"
    :highlight-row="selectUseStatusInfo.row.highlightRow"
    @callback="callBackUserStatus"
  ></select-use-status>
  <select-dept
    v-if="selectDeptInfo.visible"
    v-model:show-dialog="selectDeptInfo.visible"
    :api="selectDeptInfo.api"
    :save-empty="true"
    :checked-list="
      selectDeptInfo.row.checkBox
        ? selectDeptInfo.checked[selectDeptInfo.row.value]
        : []
    "
    :check-box="selectDeptInfo.row.checkBox"
    :highlight-row="selectDeptInfo.row.highlightRow"
    :query="selectDeptInfo.row.query"
    @callback="callBackDept"
  ></select-dept>
  <SelectSettingClassification
    v-if="selectDeviceTypeInfo.visible"
    v-model:show-dialog="selectDeviceTypeInfo.visible"
    :api="selectDeviceTypeInfo.api"
    :save-empty="true"
    :checked-list="
      selectDeviceTypeInfo.row.checkBox
        ? selectDeviceTypeInfo.checked[selectDeviceTypeInfo.row.value]
        : []
    "
    :check-box="selectDeviceTypeInfo.row.checkBox"
    :highlight-row="selectDeviceTypeInfo.row.highlightRow"
    @callback="callBackselectDeviceType"
  />
  <SelectSettingCategory
    v-if="selectFinanceTypeInfo.visible"
    v-model:show-dialog="selectFinanceTypeInfo.visible"
    :api="selectFinanceTypeInfo.api"
    :save-empty="true"
    :checked-list="
      selectFinanceTypeInfo.row.checkBox
        ? selectFinanceTypeInfo.checked[selectFinanceTypeInfo.row.value]
        : []
    "
    :check-box="selectFinanceTypeInfo.row.checkBox"
    :highlight-row="selectFinanceTypeInfo.row.highlightRow"
    @callback="callBackselectFinanceType"
  />
  <SelectAssetClassify
    v-if="selectAssetClassifyTypeInfo.visible"
    v-model:show-dialog="selectAssetClassifyTypeInfo.visible"
    :api="selectAssetClassifyTypeInfo.api"
    :save-empty="true"
    :checked-list="
      selectAssetClassifyTypeInfo.row.checkBox
        ? selectAssetClassifyTypeInfo.checked[
            selectAssetClassifyTypeInfo.row.value
          ]
        : []
    "
    :check-box="selectAssetClassifyTypeInfo.row.checkBox"
    :highlight-row="selectAssetClassifyTypeInfo.row.highlightRow"
    @callback="callBackSelectClassifyType"
  />
  <SelectFiscalPeriod
    v-if="selectFiscalPeriodInfo.visible"
    v-model:show-dialog="selectFiscalPeriodInfo.visible"
    :api="selectFiscalPeriodInfo.api"
    :save-empty="true"
    :checked-list="
      selectFiscalPeriodInfo.row.checkBox
        ? selectFiscalPeriodInfo.checked[selectFiscalPeriodInfo.row.value]
        : []
    "
    :check-box="selectFiscalPeriodInfo.row.checkBox"
    :highlight-row="selectFiscalPeriodInfo.row.highlightRow"
    :query="selectFiscalPeriodInfo.row.query"
    @callback="callBackSelectFiscalPeriod"
  />
  <selectPatrolRoute
    v-if="selectPatrolRouteInfo.visible"
    v-model:show-dialog="selectPatrolRouteInfo.visible"
    :save-empty="true"
    :checked-list="
      selectPatrolRouteInfo.row.checkBox
        ? selectPatrolRouteInfo.checked[selectPatrolRouteInfo.row.value]
        : []
    "
    :check-box="selectPatrolRouteInfo.row.checkBox"
    :highlight-row="selectPatrolRouteInfo.row.highlightRow"
    @callback="callBackPatrolRouteInfo"
  />
  <selectMaintenance
    v-if="selectMaintenanceInfo.visible"
    v-model:show-dialog="selectMaintenanceInfo.visible"
    :save-empty="true"
    :checked-list="
      selectMaintenanceInfo.row.checkBox
        ? selectMaintenanceInfo.checked[selectMaintenanceInfo.row.value]
        : []
    "
    :check-box="selectMaintenanceInfo.row.checkBox"
    :highlight-row="selectMaintenanceInfo.row.highlightRow"
    @callback="callBackMaintenance"
  />
  <!-- 维修人员 -->
  <SelectRepairUser
    v-if="selectRepairUserInfo.visible"
    v-model:showDialog="selectRepairUserInfo.visible"
    :checked-list="
      selectRepairUserInfo.row.checkBox
        ? selectRepairUserInfo.checked[selectRepairUserInfo.row.value]
        : []
    "
    :check-box="selectRepairUserInfo.row.checkBox"
    :highlight-row="selectRepairUserInfo.row.highlightRow"
    :saveEmpty="true"
    @callback="selectRepairUserCallBack"
  />
  <!-- 维修人员 -->
  <SelectMaintenanceUser
    :title="selectMaintenanceUserInfo.title"
    v-if="selectMaintenanceUserInfo.visible"
    v-model:showDialog="selectMaintenanceUserInfo.visible"
    :checked-list="
      selectMaintenanceUserInfo.row.checkBox
        ? selectMaintenanceUserInfo.checked[selectMaintenanceUserInfo.row.value]
        : []
    "
    :check-box="selectMaintenanceUserInfo.row.checkBox"
    :highlight-row="selectMaintenanceUserInfo.row.highlightRow"
    :saveEmpty="true"
    @callback="selectMaintenanceUserCallBack"
  />
  <SelectCargoSpace
    v-if="selectCargoSpaceInfo.visible"
    v-model:showDialog="selectCargoSpaceInfo.visible"
    :checked-list="
      selectRepairUserInfo.row.checkBox
        ? selectCargoSpaceInfo.checked[selectCargoSpaceInfo.row.value]
        : []
    "
    :check-box="selectCargoSpaceInfo.row.checkBox"
    :highlight-row="selectCargoSpaceInfo.row.highlightRow"
    :saveEmpty="true"
    @callback="selectCargoSpaceCallBack"
  />
  <select-supplier
    v-if="supplierInfo.visible"
    v-model:show-dialog="supplierInfo.visible"
    :api="supplierInfo.api"
    :save-empty="true"
    :checked-list="
      supplierInfo.row.checkBox
        ? supplierInfo.checked[supplierInfo.row.value]
        : []
    "
    :check-box="supplierInfo.row.checkBox"
    :highlight-row="supplierInfo.row.highlightRow"
    @callback="callBackSupplier"
  />
  <SelectProductClassification
    v-if="productClassificationInfo.visible"
    v-model:show-dialog="productClassificationInfo.visible"
    :api="productClassificationInfo.api"
    :save-empty="true"
    :checked-list="
      productClassificationInfo.row.checkBox
        ? productClassificationInfo.checked[productClassificationInfo.row.value]
        : []
    "
    :check-box="productClassificationInfo.row.checkBox"
    :highlight-row="productClassificationInfo.row.highlightRow"
    @callback="callBackProductClass"
  />
  <select-product
    v-if="productInfo.visible"
    v-model:show-dialog="productInfo.visible"
    :showEditQty="false"
    :query="productInfo.row.query ? productInfo.row.query.queryMap || {} : {}"
    :queryParams="
      productInfo.row.query ? productInfo.row.query.queryParams || {} : {}
    "
    :tableKey="productInfo.row.tableKey"
    :allowCoverFilterParams="productInfo.row.allowCoverFilterParams || false"
    :save-empty="true"
    :checked-list="
      productInfo.row.checkBox ? productInfo.checked[productInfo.row.value] : []
    "
    :check-box="productInfo.row.checkBox"
    :highlight-row="productInfo.row.highlightRow"
    @callback="callBackProduct"
  />
</template>
<script setup name="SetPreference">
import draggable from 'vuedraggable'
import SelectModel from '@/components/SelectModel/index'
import SlipSelect from '@/components/SlipSelect/index'
import SelectUsers from '@/components/SelectUsers/index'
import SelectUseStatus from '@/components/SelectUseStatus/index'
import SelectDept from '@/components/SelectDept/index'
import SelectSettingClassification from '@/components/SelectSettingClassification/index'
import SelectSettingCategory from '@/components/SelectSettingCategory/index'
import SelectFiscalPeriod from '@/components/SelectFiscalPeriod/index'
import selectPatrolRoute from '@/components/SelectPatrolRoute/index'
import selectMaintenance from '@/components/SelectMaintenance/index'
import SelectCargoSpace from '@/components/SelectCargoSpace/index'
import SelectMultiple from '../SelectMultiple/index'
import SelectSupplier from '@/components/SelectSupplier/index'
import { getRrgUserList } from '@/api/base.js'
import {
  getDeptPage,
  getSupplierPage,
  getCoreFiscalPeriodPage,
  getProductPage,
  productCategoryPage,
} from '@/api/core.js'
import {
  getClassifyPage,
  useStatusPage,
  getClassificationPage,
  getCategoryPage,
} from '@/api/asset'
// import pinyin from 'js-pinyin'
const SelectRepairUser = defineAsyncComponent(() =>
  import('@/components/SelectRepairUser/index')
)
const SelectMaintenanceUser = defineAsyncComponent(() =>
  import('@/components/SelectUsers/selectMaintenanceUsers')
)
const SelectAssetClassify = defineAsyncComponent(() =>
  import('@/components/SelectAssetClassify/index')
)
const SelectProductClassification = defineAsyncComponent(() =>
  import('@/components/SelectProductClassification/index')
)
const { proxy } = getCurrentInstance()
const emits = defineEmits()
//偏好设置
const PageDialog = defineAsyncComponent(() =>
  import('@/components/PageDialog/index')
)
const props = defineProps({
  visible: {
    type: Boolean,
  },
  searchList: {
    type: Array,
    default: function () {
      return []
    },
  },
  fieldList: {
    type: Array,
    default: function () {
      return []
    },
  },
  customizeUserVO: {
    type: Object,
    default: function () {
      return {}
    },
  },
  groupLevelShow: {
    type: Boolean,
    default: false,
  },
  listTypeInfo: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const activeName = ref('queryLevel')
const dialogInfo = ref({
  title: '偏好设置',
  width: '1000px',
  btLoading: false,
  btList: [
    { label: '关闭', event: handleClose, show: true },
    {
      label: '保存',
      type: 'primary',
      disabled: false,
      event: save,
      show: true,
    },
  ],
})
const searchList1 = ref([])
const searchList2 = ref([])
const fieldList1 = ref([])
const fieldList2 = ref([])
const newFieldList = ref([])
const newCustomizeUserVO = ref({})

const listTypeOptionsInfo = ref({})
const copyListTypeInfo = ref({})
const list = ref('')
const timeInfo = ref({})
const userInfo = ref({
  visible: false,
  api: getRrgUserList,
  row: {},
  data: {},
  checked: {},
})
const supplierInfo = ref({
  visible: false,
  api: getSupplierPage,
  row: {},
  data: {},
  checked: {},
})
const productInfo = ref({
  visible: false,
  api: getProductPage,
  row: {},
  data: {},
  checked: {},
})
const selectUseStatusInfo = ref({
  visible: false,
  api: useStatusPage,
  row: {},
  data: {},
  checked: {},
})
const selectDeptInfo = ref({
  visible: false,
  api: getDeptPage,
  row: {},
  data: {},
  checked: {},
})
const selectDeviceTypeInfo = ref({
  visible: false,
  api: getClassificationPage,
  row: {},
  data: {},
  checked: {},
})
const selectFinanceTypeInfo = ref({
  visible: false,
  api: getCategoryPage,
  row: {},
  data: {},
  checked: {},
})
const selectAssetClassifyTypeInfo = ref({
  visible: false,
  api: getClassifyPage,
  row: {},
  data: {},
  checked: {},
})
const selectFiscalPeriodInfo = ref({
  visible: false,
  api: getCoreFiscalPeriodPage,
  row: {},
  data: {},
  checked: {},
})
const selectPatrolRouteInfo = ref({
  visible: false,
  row: {},
  data: {},
  checked: {},
})
const selectMaintenanceInfo = ref({
  visible: false,
  row: {},
  data: {},
  checked: {},
})
const selectRepairUserInfo = ref({
  visible: false,
  row: {},
  data: {},
  checked: {},
})
const selectMaintenanceUserInfo = ref({
  title: '请选择维修人员',
  visible: false,
  row: {},
  data: {},
  checked: {},
})
const selectCargoSpaceInfo = ref({
  visible: false,
  row: {},
  data: {},
  checked: {},
})
const productClassificationInfo = ref({
  visible: false,
  api: productCategoryPage,
  row: {},
  data: {},
  checked: {},
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emits('update:visible', newValue) // 更新父组件shows
  },
})
const noInput = computed(() => (data) => {
  if (
    !data.slot &&
    (data.componentType === 'price' || data.componentType === 'number')
  ) {
    return '无'
  }
  return ''
})
watch(
  () => props.listTypeInfo,
  (val) => {
    listTypeOptionsInfo.value = proxy.$fn.deepClone(val)
    copyListTypeInfo.value = proxy.$fn.deepClone(listTypeOptionsInfo.value)
  },
  {
    immediate: true,
    deep: true,
  }
)
watch(
  () => props.searchList,
  (val) => {
    props.searchList.forEach((item) => {
      if (
        item.componentType === 'daterange' ||
        item.componentType === 'datetimerange'
      ) {
        if (
          item.searchDefaultValue &&
          !proxy.$fn.isEmptyString(item.searchDefaultValue)
        ) {
          proxy.$nextTick(() => {
            let arr = proxy.$fn.splitArr(item.searchDefaultValue)
            let str = item.asValue ? item.asValue : item.value
            timeInfo.value[str] = Array.from(arr)
          })
        }
      }
    })
  },
  {
    deep: true,
    immediate: true,
  }
)
setData()
function setData() {
  newCustomizeUserVO.value = JSON.parse(JSON.stringify(props.customizeUserVO))
  let arr1 = proxy.$fn.deepClone(props.searchList)
  newFieldList.value = proxy.$fn.deepClone(props.fieldList)
  if (arr1.length) {
    searchList1.value = arr1.filter((item) => item.searchLevel === 0)
    searchList2.value = arr1.filter((item) => item.searchLevel > 0)
  }
}
function setTop(row, arr, str) {
  //置顶
  arr = arr.filter((item) => item !== row)
  switch (str) {
    case 'queryLevel':
      arr.unshift(row)
      arr.forEach((item, index) => {
        item.searchLevel = index + 1
      })
      searchList2.value = arr
      break
    case 'showLevel':
      arr.unshift(row)
      arr.forEach((item, index) => {
        item.showLevel = index + 1
      })
      fieldList2.value = arr
      break
    case 'groupLevel':
      arr.unshift(row)
      arr.forEach((item, index) => {
        item.groupLevel = index + 1
      })
      fieldList2.value = arr
      break
  }
}
function rightMove(str) {
  //右移
  switch (str) {
    case 'queryLevel':
      searchList2.value = searchList2.value.concat(searchList1.value)
      searchList2.value.forEach((item, index) => {
        item.show = true
        item.searchLevel = index + 1
      })
      searchList1.value = []
      break
    case 'showLevel':
      fieldList2.value = fieldList2.value.concat(fieldList1.value)
      fieldList2.value.forEach((item, index) => {
        item.hidden = false
        item.showLevel = index + 1
      })
      fieldList1.value = []
      break
    case 'groupLevel':
      fieldList2.value = fieldList2.value.concat(fieldList1.value)
      fieldList2.value.forEach((item, index) => {
        item.groupLevel = index + 1
      })
      fieldList1.value = []
      break
    case 'sortLevel':
      fieldList2.value = fieldList2.value.concat(fieldList1.value)
      fieldList2.value.forEach((item, index) => {
        item.sortable = true
        item.sortControllerType = 1
        item.sortLevel = index + 1
      })
      fieldList1.value = []
      break
  }
}
function leftMove(str) {
  //左移
  switch (str) {
    case 'queryLevel':
      searchList1.value = searchList1.value.concat(searchList2.value)
      searchList1.value.forEach((item) => {
        item.show = false
        item.searchLevel = 0
      })
      searchList2.value = []
      break
    case 'showLevel':
      fieldList1.value = fieldList1.value.concat(fieldList2.value)
      fieldList1.value.forEach((item) => {
        item.hidden = true
        item.showLevel = 0
      })
      fieldList2.value = []
      break
    case 'groupLevel':
      fieldList1.value = fieldList1.value.concat(fieldList2.value)
      fieldList1.value.forEach((item) => {
        item.groupLevel = 0
      })
      fieldList2.value = []
      break
    case 'sortLevel':
      fieldList1.value = fieldList1.value.concat(fieldList2.value)
      fieldList1.value.forEach((item) => {
        item.sortable = false
        item.sortControllerType = 0
        item.sortLevel = 0
      })
      fieldList2.value = []
      break
  }
}
function handleClose() {
  showDialog.value = false
}
function save() {
  proxy.$nextTick(() => {
    let customizeUserVO = newCustomizeUserVO.value
    let _searchList2 = proxy.$fn.deepClone(searchList2.value)
    let _searchList1 = proxy.$fn.deepClone(searchList1.value)
    let searchList = _searchList2.concat(_searchList1)
    let fieldList = newFieldList.value
    searchList.forEach((item) => {
      if (item.value === 'price' && item.searchDefaultValue) {
        let val = item.searchDefaultValue.split(',')
        if (
          !(
            val &&
            val.length == 2 &&
            !val.includes('null') &&
            !val.includes('undefined') &&
            !val.includes('')
          )
        ) {
          proxy.$message({
            message: '请填写正确的价格区间',
            type: 'warning',
          })
          throw new Error('请填写正确的价格区间')
        }
      }
      let type = Object.prototype.toString.call(item.searchDefaultValue)
      if (type === '[object Object]') {
        item.searchDefaultValue = JSON.stringify(item.searchDefaultValue)
      }
      if (Object.keys(customizeUserVO.detail).includes(item.value)) {
        customizeUserVO.detail[item.value].searchLevel = item.searchLevel
        customizeUserVO.detail[item.value].searchDefaultValue =
          item.searchDefaultValue
      }
    })
    fieldList.forEach((item) => {
      if (Object.keys(customizeUserVO.detail).includes(item.value)) {
        customizeUserVO.detail[item.value].showLevel = item.showLevel
        customizeUserVO.detail[item.value].sortControllerType =
          item.sortControllerType
        customizeUserVO.detail[item.value].sortLevel = item.sortLevel
        customizeUserVO.detail[item.value].formWidth = item.minWidth
      }
    })
    handleClose()
    emits('callback', {
      searchList: searchList,
      fieldList: fieldList,
      customizeUserVO: customizeUserVO,
    })
  })
}
function compare(property) {
  return function (a, b) {
    return a[property] - b[property]
  }
}
function handleClick() {
  proxy.$nextTick(() => {
    let fieldList = newFieldList.value
    if (activeName.value === 'showLevel') {
      fieldList1.value = fieldList.filter((item) => item.showLevel === 0)
      fieldList.sort(compare('showLevel'))
      fieldList2.value = fieldList.filter((item) => item.showLevel > 0)
    } else if (activeName.value === 'sortLevel') {
      fieldList.sort(compare('showLevel'))
      fieldList1.value = fieldList.filter(
        (item) => item.sortControllerType === 0 && item.showLevel > 0
      )
      fieldList2.value = fieldList.filter(
        (item) => item.sortControllerType > 0 && item.showLevel > 0
      )
    } else if (activeName.value === 'groupLevel') {
      fieldList1.value = fieldList.filter(
        (item) => item.groupLevel === 0 && item.showLevel > 0
      )
      fieldList2.value = fieldList.filter(
        (item) => item.groupLevel > 0 && item.showLevel > 0
      )
    }
  })
}
function changeSort(num, index) {
  if (num === 1) {
    fieldList2.value[index].sortControllerType = 2
  } else if (num === 2) {
    fieldList2.value[index].sortControllerType = 1
  }
}
//查询
function add1(e) {
  searchList1.value.forEach((item) => {
    item.show = false
    item.searchLevel = 0
  })
}
function add2(e) {
  searchList2.value.forEach((item, index) => {
    item.show = true
    item.searchLevel = index + 1
  })
}
function datadragSearchEnd2() {
  searchList2.value.forEach((item, index) => {
    item.searchLevel = index + 1
  })
}
//显示
function fieldAddshow1() {
  fieldList1.value.forEach((item) => {
    item.hidden = true
    item.showLevel = 0
  })
}
function fieldAddshow2() {
  fieldList2.value.forEach((item, index) => {
    item.hidden = false
    item.showLevel = index + 1
  })
}
function datadragFieldEnd2() {
  fieldList2.value.forEach((item, index) => {
    item.showLevel = index + 1
  })
}
//分组
function fieldAddGroup1() {
  fieldList1.value.forEach((item) => {
    item.groupLevel = 0
  })
}
function fieldAddGroup2() {
  fieldList2.value.forEach((item, index) => {
    item.groupLevel = index + 1
  })
}
function datadragFieldEnd3() {
  fieldList2.value.forEach((item, index) => {
    item.groupLevel = index + 1
  })
}
//排序
function fieldAddSort1(e) {
  fieldList1.value.forEach((item) => {
    item.sortable = false
    item.sortControllerType = 0
    item.sortLevel = 0
  })
}
function fieldAddSort2(e) {
  let newIndex = e.newIndex
  fieldList2.value.forEach((item, index) => {
    item.sortable = true
    item.sortControllerType = newIndex === index ? 1 : item.sortControllerType
    item.sortLevel = index + 1
  })
}
function datadragFieldEnd4(e) {
  fieldList2.value.forEach((item, index) => {
    item.sortLevel = index + 1
  })
}
function choose1(evt) {
  // const ITEM_HEIGHT = 153;
  const ITEM_HEIGHT = evt.item.offsetHeight
  let container = evt.path[1]
  let index = evt.oldIndex

  if (index * ITEM_HEIGHT < container.scrollTop) {
    container.scrollTo({
      top: index * ITEM_HEIGHT,
    })
  } else if (
    (index + 1) * ITEM_HEIGHT >
    container.scrollTop + container.offsetHeight
  ) {
    container.scrollTo({
      top: (index + 1) * ITEM_HEIGHT - container.offsetHeight,
    })
  }
}
function choose2(evt) {
  // const ITEM_HEIGHT = 153;
  const ITEM_HEIGHT = evt.item.offsetHeight
  let container = evt.path[1]
  let index = evt.oldIndex

  if (index * ITEM_HEIGHT < container.scrollTop) {
    container.scrollTo({
      top: index * ITEM_HEIGHT,
    })
  } else if (
    (index + 1) * ITEM_HEIGHT >
    container.scrollTop + container.offsetHeight
  ) {
    container.scrollTo({
      top: (index + 1) * ITEM_HEIGHT - container.offsetHeight,
    })
  }
}
// 得到placeholder的显示
function getPlaceholder(row) {
  let placeholder = ''
  if (row.componentType === 'input' || row.componentType === 'textarea') {
    placeholder = '请输入' + row.label
  } else if (
    row.componentType === 'select' ||
    row.componentType === 'time' ||
    row.componentType === 'date' ||
    row.componentType === 'dateTime' ||
    row.componentType === 'select-model' ||
    row.componentType === 'slip-select'
  ) {
    placeholder = '请选择' + row.label
  } else {
    placeholder = row.label
  }
  return placeholder
}
function visibleChange(val, _list) {
  //下拉框出现/隐藏时触发
  list.value = _list
  if (!val) {
    listTypeOptionsInfo.value[_list] = copyListTypeInfo.value[_list]
  }
}
function timeChange(val, elemnt) {
  if (val && val.length) {
    elemnt.searchDefaultValue = val[0] + ',' + val[1]
  } else {
    elemnt.searchDefaultValue = null
  }
}
echoFun()
function echoFun() {
  let searchList = proxy.$fn.deepClone(props.searchList)
  if (searchList.length) {
    searchList.forEach((item) => {
      let searchDefaultValue = item.searchDefaultValue
      let type = Object.prototype.toString.call(searchDefaultValue)
      if (item.componentType === 'select-user') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            userInfo.value.checked[item.value] = searchDefaultValue.key
          }
          userInfo.value.data[item.value] = searchDefaultValue.value
        }
      } else if (item.componentType === 'select-supplier') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            supplierInfo.value.checked[item.value] = searchDefaultValue.key
          }
          supplierInfo.value.data[item.value] = searchDefaultValue.value
        }
      } else if (item.componentType === 'select-product') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            productInfo.value.checked[item.value] = searchDefaultValue.key
          }
          productInfo.value.data[item.value] = searchDefaultValue.value
        }
      } else if (item.componentType === 'select-use-status') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectUseStatusInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectUseStatusInfo.value.data[item.value] = searchDefaultValue.value
        }
      } else if (item.componentType === 'select-dept') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectDeptInfo.value.checked[item.value] = searchDefaultValue.key
          }
          selectDeptInfo.value.data[item.value] = searchDefaultValue.value
        }
      } else if (item.componentType === 'select-device-type') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectDeviceTypeInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectDeviceTypeInfo.value.data[item.value] = searchDefaultValue.value
        }
      } else if (item.componentType === 'select-finance-type') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectFinanceTypeInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectFinanceTypeInfo.value.data[item.value] =
            searchDefaultValue.value
        }
      } else if (item.componentType === 'select-asset-classify-type') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectAssetClassifyTypeInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectAssetClassifyTypeInfo.value.data[item.value] =
            searchDefaultValue.value
        }
      } else if (item.componentType === 'select-fiscal-period') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectFiscalPeriodInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectFiscalPeriodInfo.value.data[item.value] =
            searchDefaultValue.value
        }
      } else if (item.componentType === 'select-patrol-route') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectPatrolRouteInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectPatrolRouteInfo.value.data[item.value] =
            searchDefaultValue.value
        }
      } else if (item.componentType === 'select-maintenance') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectMaintenanceInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectMaintenanceInfo.value.data[item.value] =
            searchDefaultValue.value
        }
      } else if (item.componentType === 'select-repair-user') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectRepairUserInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectRepairUserInfo.value.data[item.value] = searchDefaultValue.value
        }
      } else if (item.componentType === 'select-maintenance-user') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectMaintenanceUserInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectMaintenanceUserInfo.value.data[item.value] =
            searchDefaultValue.value
        }
      } else if (item.componentType === 'select-shelf-no') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            selectCargoSpaceInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          selectCargoSpaceInfo.value.data[item.value] = searchDefaultValue.value
        }
      } else if (item.componentType === 'select-product-class') {
        if (
          type === '[object Object]' &&
          searchDefaultValue.key &&
          searchDefaultValue.key.length
        ) {
          if (item.checkBox) {
            productClassificationInfo.value.checked[item.value] =
              searchDefaultValue.key
          }
          productClassificationInfo.value.data[item.value] =
            searchDefaultValue.value
        }
      }
    })
  }
}
function checkUser(item) {
  userInfo.value.visible = true
  userInfo.value.row = item
}
function checkSupplier(item) {
  supplierInfo.value.visible = true
  supplierInfo.value.row = item
}
function checkProduct(item) {
  productInfo.value.visible = true
  productInfo.value.row = item
}

function checkUserStatus(item) {
  selectUseStatusInfo.value.visible = true
  selectUseStatusInfo.value.row = item
}
function checkDept(item) {
  selectDeptInfo.value.visible = true
  selectDeptInfo.value.row = item
}
function checkDevice(item) {
  selectDeviceTypeInfo.value.visible = true
  selectDeviceTypeInfo.value.row = item
}
function checkFinance(item) {
  selectFinanceTypeInfo.value.visible = true
  selectFinanceTypeInfo.value.row = item
}
function checkClassify(item) {
  selectAssetClassifyTypeInfo.value.visible = true
  selectAssetClassifyTypeInfo.value.row = item
}
function checkFiscalPeriod(item) {
  selectFiscalPeriodInfo.value.visible = true
  selectFiscalPeriodInfo.value.row = item
}
function checkPatrolRoute(item) {
  selectPatrolRouteInfo.value.visible = true
  selectPatrolRouteInfo.value.row = item
}
function checkMaintenance(item) {
  selectMaintenanceInfo.value.visible = true
  selectMaintenanceInfo.value.row = item
}
function checkRepairUser(item) {
  selectRepairUserInfo.value.visible = true
  selectRepairUserInfo.value.row = item
}
function checkMaintenanceUser(item) {
  selectMaintenanceUserInfo.value.visible = true
  selectMaintenanceUserInfo.value.row = item
}
function checkShelfNo(item) {
  selectCargoSpaceInfo.value.visible = true
  selectCargoSpaceInfo.value.row = item
}
function checkProductClass(item) {
  productClassificationInfo.value.visible = true
  productClassificationInfo.value.row = item
}
function callBackUser(row) {
  let data = userInfo.value.row
  let searchList2Item = searchList2.value.find(
    (item) => item.value === data.value
  )
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      userInfo.value.checked[data.value] = ids
    }
    let names = row.map((item) => item.name).toString()
    userInfo.value.data[data.asValue] = ids.toString()
    userInfo.value.data[data.value] = names
    searchList2Item.searchDefaultValue = {
      key: ids,
      value: names,
    }
  } else {
    userInfo.value.data[data.asValue] = ''
    userInfo.value.data[data.value] = ''
    userInfo.value.checked[data.value] = []
    searchList2Item.searchDefaultValue = ''
  }
}
function callBackSupplier(row) {
  let data = supplierInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.supplierId)
    if (type === '[object Array]') {
      supplierInfo.value.checked[data.value] = ids
    }
    supplierInfo.value.data[data.asValue] = ids.toString()
    supplierInfo.value.data[data.value] = row
      .map((item) => item.supplierName)
      .toString()
  } else {
    supplierInfo.value.data[data.asValue] = ''
    supplierInfo.value.data[data.value] = ''
    supplierInfo.value.checked[data.value] = []
  }
}
function callBackProduct(row) {
  let data = productInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      productInfo.value.checked[data.value] = ids
    }
    productInfo.value.data[data.asValue] = ids.toString()
    productInfo.value.data[data.value] = row
      .map((item) => item.commonName)
      .toString()
  } else {
    productInfo.value.data[data.asValue] = ''
    productInfo.value.data[data.value] = ''
    productInfo.value.checked[data.value] = []
  }
}

function callBackUserStatus(row) {
  let data = selectUseStatusInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectUseStatusInfo.value.checked[data.value] = ids
    }
    selectUseStatusInfo.value.data[data.asValue] = ids.toString()
    selectUseStatusInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    selectUseStatusInfo.value.data[data.asValue] = ''
    selectUseStatusInfo.value.data[data.value] = ''
    selectUseStatusInfo.value.checked[data.value] = []
  }
}
function callBackDept(row) {
  let data = selectDeptInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectDeptInfo.value.checked[data.value] = ids
    }
    selectDeptInfo.value.data[data.asValue] = ids.toString()
    selectDeptInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    selectDeptInfo.value.data[data.asValue] = ''
    selectDeptInfo.value.data[data.value] = ''
    selectDeptInfo.value.checked[data.value] = []
  }
}
function callBackselectDeviceType(row) {
  let data = selectDeviceTypeInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectDeviceTypeInfo.value.checked[data.value] = ids
    }
    selectDeviceTypeInfo.value.data[data.asValue] = ids.toString()
    selectDeviceTypeInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    selectDeviceTypeInfo.value.data[data.asValue] = ''
    selectDeviceTypeInfo.value.data[data.value] = ''
    selectDeviceTypeInfo.value.checked[data.value] = []
  }
}
function callBackselectFinanceType(row) {
  let data = selectFinanceTypeInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectFinanceTypeInfo.value.checked[data.value] = ids
    }
    selectFinanceTypeInfo.value.datae[data.asValue] = ids.toString()
    selectFinanceTypeInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    selectFinanceTypeInfo.value.data[data.asValue] = ''
    selectFinanceTypeInfo.value.data[data.value] = ''
    selectFinanceTypeInfo.value.checked[data.value] = []
  }
}
function callBackSelectClassifyType(row) {
  let data = selectAssetClassifyTypeInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectAssetClassifyTypeInfo.value.checked[data.value] = ids
    }
    sselectAssetClassifyTypeInfo.value.data[data.asValue] = ids.toString()
    selectAssetClassifyTypeInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    selectAssetClassifyTypeInfo.value.data[data.asValue] = ''
    selectAssetClassifyTypeInfo.value.data[data.value] = ''
    selectAssetClassifyTypeInfo.value.checked[data.value] = []
  }
}
function callBackSelectFiscalPeriod(row) {
  let data = selectFiscalPeriodInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let names = row.map((item) => item.name)
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectFiscalPeriodInfo.value.checked[data.value] = names
    }
    if (data.asValue.includes('Id') || data.asValue.includes('id')) {
      selectFiscalPeriodInfo.value.data[data.asValue] = ids.toString()
    } else {
      selectFiscalPeriodInfo.value.data[data.asValue] = names.toString()
    }

    selectFiscalPeriodInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    selectFiscalPeriodInfo.value.data[data.asValue] = ''
    selectFiscalPeriodInfo.value.data[data.value] = ''
    selectFiscalPeriodInfo.value.checked[data.value] = []
  }
  emits('selectFiscalPeriodInfo')
}
function callBackPatrolRouteInfo(row) {
  let data = selectPatrolRouteInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectPatrolRouteInfo.value.checked[data.value] = ids
    }
    selectPatrolRouteInfo.value.data.value[data.asValue] = ids.toString()
    selectPatrolRouteInfo.value.data[data.value] = row
      .map((item) => item.routeName)
      .toString()
  } else {
    selectPatrolRouteInfo.value.data[data.asValue] = ''
    selectPatrolRouteInfo.value.data[data.value] = ''
    selectPatrolRouteInfo.value.checked[data.value] = []
  }
}
function callBackMaintenance(row) {
  let data = selectMaintenanceInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.maintenanceId)
    if (type === '[object Array]') {
      selectMaintenanceInfo.value.checked[data.value] = ids
    }
    selectMaintenanceInfo.value.data[data.asValue] = ids.toString()
    selectMaintenanceInfo.value.data[data.value] = row
      .map((item) => item.maintenanceName)
      .toString()
  } else {
    selectMaintenanceInfo.value.data[data.asValue] = ''
    selectMaintenanceInfo.value.data[data.value] = ''
    selectMaintenanceInfo.value.checked[data.value] = []
  }
}
function selectRepairUserCallBack(row) {
  let data = selectRepairUserInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.userId)
    if (type === '[object Array]') {
      selectRepairUserInfo.value.checked[data.value] = ids
    }
    selectRepairUserInfo.value.data[data.asValue] = ids.toString()
    selectRepairUserInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    selectRepairUserInfo.value.data[data.asValue] = ''
    selectRepairUserInfo.value.data[data.value] = ''
    selectRepairUserInfo.value.checked[data.value] = []
  }
}
function selectMaintenanceUserCallBack(row) {
  let data = selectMaintenanceUserInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.userId)
    if (type === '[object Array]') {
      selectMaintenanceUserInfo.value.checked[data.value] = ids
    }
    selectMaintenanceUserInfo.value.data[data.asValue] = ids.toString()
    selectMaintenanceUserInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    selectMaintenanceUserInfo.value.data[data.asValue] = ''
    selectMaintenanceUserInfo.value.data[data.value] = ''
    selectMaintenanceUserInfo.value.checked[data.value] = []
  }
}
function selectCargoSpaceCallBack(row) {
  let data = selectCargoSpaceInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      selectCargoSpaceInfo.value.checked[data.value] = ids
    }
    selectRepairUserInfo.value.data[data.asValue] = ids.toString()
    selectCargoSpaceInfo.value.data[data.value] = row
      .map((item) => item.locationNo)
      .toString()
  } else {
    selectRepairUserInfo.value.data[data.asValue] = ''
    selectCargoSpaceInfo.value.data[data.value] = ''
    selectCargoSpaceInfo.value.checked[data.value] = []
  }
}
function callBackProductClass(row) {
  let data = productClassificationInfo.value.row
  let type = Object.prototype.toString.call(row)
  row =
    type === '[object Object]' ? [row] : type === '[object Array]' ? row : []
  if (row.length) {
    let ids = row.map((item) => item.id)
    if (type === '[object Array]') {
      productClassificationInfo.value.checked[data.value] = ids
    }
    searchQuery.value[data.asValue] = ids.toString()
    productClassificationInfo.value.data[data.value] = row
      .map((item) => item.name)
      .toString()
  } else {
    searchQuery.value[data.asValue] = ''
    productClassificationInfo.value.data[data.value] = ''
    productClassificationInfo.value.checked[data.value] = []
  }
}
</script>
<style scoped lang="scss">
.set-preference-wrap {
  padding: 5px 0;
  box-sizing: border-box;
  .set-preference-item {
    border: 1px solid #dae2ea;
    height: 300px;
    overflow: hidden;
    overflow-y: scroll;
  }
}
.draggable-wrap {
  height: 100%;
  .draggable-wrap-group {
    height: 100%;
    width: 100%;
    display: inline-block;
  }
}
.draggable-wrap-item {
  height: 36px;
  width: 100%;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #dae2ea;
  padding: 0 5px;
  box-sizing: border-box;
  color: #606266;
  .draggable-wrap-item-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .draggable-wrap-item-right-form-width {
      margin-right: 10px;
    }
    .draggable-wrap-item-right-form-width-title {
      width: 100px;
      margin-right: 10px;
      text-align: center;
    }
    .draggable-wrap-item-right-form-width-default-title {
      width: 216px;
      margin-right: 10px;
      text-align: center;
    }
  }
}
.background-color {
  background: #dfdfdf;
  border-top: 0;
  color: #909399;
  font-weight: 600;
}
.margin-right {
  margin-right: 10px;
}
.slip-edit {
  display: inline-block;
  width: 40px;
}
</style>
